<template>
  <div class="goods">
    <div class="w">
      <div class="title">
        <span>首页</span>
        <i>/</i>
        <span>全部商品</span>
      </div>
      <img src="../../assets/img/banner.4c6b6225.png" alt="" class="banner1" />
      <div class="box">
        <div class="style">
          <span class="style1">排序: </span>
          <ul class="style__list">
            <li
              :class="{ current: item.title == curCoin }"
              v-for="(item, index) in number"
              :key="index"
              @click="changShopCodeList(item.min, item.max, item.title)"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
        <div class="style">
          <span class="style1">分类: </span>
          <ul class="style__list">
            <li
              :class="{ current: curType == item.shopType }"
              @click="changeShopTypeList(item.shopType)"
              v-for="item in type"
              :key="item.shopType"
            >
              {{ item.shopTypeTitle }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <CartItem :info="searchProduct"></CartItem>
    <p class="bottom">
      <img
        src="../../assets/img/小黄人.gif"
        alt=""
        width="30"
        height="30"
        v-if="!isBottom"
      />
      {{ isBottom ? "已经没有数据了" : "正在加载... ..." }}
    </p>
  </div>
</template>

<script>
import CartItem from "../home/CartItem";
import { goodProducts } from "../../utils/api";
import { mapActions, mapState } from "vuex";
import {
  getScrollTop,
  getClientHeight,
  getScrollHeight,
} from "@/utils/otherUtils";
export default {
  name: "Goods",
  data() {
    return {
      allProduct: [],
      searchProduct: [],
      number: [
        {
          min: 0,
          max: 0,
          title: "全部",
        },
        {
          min: 0,
          max: 1,
          title: "我能兑换的",
        },
        {
          min: 0,
          max: 500,
          title: "0-500分",
        },
        {
          min: 500,
          max: 1000,
          title: "500-1000分",
        },
        {
          min: 1000,
          max: 1500,
          title: "1000-1500分",
        },
        {
          min: 1500,
          max: 2500,
          title: "1500-2500分",
        },
        {
          min: 2500,
          max: 6500,
          title: "2500-6500分",
        },
        {
          min: 6500,
          max: 10000,
          title: "6500-10000分",
        },
        {
          min: 10000,
          max: 50000,
          title: "10000-30000分",
        },
      ],
      type: [
        {
          shopType: 0,
          shopTypeTitle: "全部",
        },
        {
          shopType: 1,
          shopTypeTitle: "实物商品",
        },
        {
          shopType: 2,
          shopTypeTitle: "虚拟商品",
        },
      ],
      curCoin: "全部",
      curType: 0,
      min: 0,
      max: 0,
      keyword: "",
      page: 1,
      size: 8,
      isLoading: false,
      isBottom: false,
    };
  },
  computed: {
    ...mapState("userModule", ["info"]),
  },
  methods: {
    ...mapActions("showToast", ["asyncChangeShowToast"]),
    async getGoodsShop() {
      const allProduct = await goodProducts({
        type: this.curType,
        min: this.min,
        max: this.max,
        keyword: this.keyword,
      });
      // 返回code不为零结束函数
      if (allProduct === false) return;
      this.allProduct = allProduct.data;
      this.searchProduct = this.allProduct.filter((item, index) => index < 8);
    },
    async changShopCodeList(min, max, title) {
      // 防止未登录查看能够购买的物品
      if (!localStorage.getItem("x-auth-token") && title == "我能兑换的") {
        this.asyncChangeShowToast({
          content: "请登录后查看",
          type: "info",
        });
        this.max = this.info.coin || max;
        return;
      }
      // 给要搜索的商品相应参数赋值
      this.curCoin = title;
      this.min = min;
      this.max = max;
      // 初始化页数
      this.page = 1;
      // 初始化是否到底
      this.isBottom = false;
      this.getGoodsShop();
    },
    async changeShopTypeList(type) {
      this.curType = type;
      // 初始化页数
      this.page = 1;
      // 初始化是否到底
      this.isBottom = false;
      this.getGoodsShop();
    },
    scrollFn() {
      if (getScrollTop() + getClientHeight() >= getScrollHeight() - 300) {
        if (this.searchProduct.length == this.allProduct.length) {
          return (this.isBottom = true);
        }
        if (!this.isLoading) {
          this.page++;
          this.isLoading = true;
          setTimeout(() => {
            for (
              let i = this.size * (this.page - 1);
              i < this.size * this.page;
              i++
            ) {
              if (this.allProduct[i])
                this.searchProduct.push(this.allProduct[i]);
            }
            this.isLoading = false;
          }, 3000);
        }
      }
    },
  },
  components: { CartItem },
  // 第一次进入页面调用
  created() {
    this.keyword = this.$route.query.keyword;
    this.getGoodsShop();
  },
  mounted() {
    window.addEventListener("scroll", this.scrollFn);
  },
  // 关键词更新调用
  beforeRouteUpdate(to, from, next) {
    // 先进入下一个页面
    next();
    // 再渲染最新信息
    this.keyword = this.$route.query.keyword;
    this.getGoodsShop();
  },
  // 关键词更新调用
  // watch: {
  //   "$route.query.keyword": {
  //     async handler(newVal) {
  //       this.keyword = newVal;
  //       this.getGoodsShop();
  //     },
  //   },
  // },
};
</script>

<style lang="less" scoped>
.goods {
  padding-bottom: 30px;
}
.title {
  padding: 15px 0;
  font-size: 16px;
  color: #999;
  font-family: SourceHanSansSC;
  font-size: 300;
  i {
    margin: 0 8px;
  }
  & > span:nth-of-type(1) {
    color: #333;
    font-weight: 700;
  }
}
.banner1 {
  display: block;
}
.box {
  padding: 40px 0 8px;
}
.style {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  font-size: 18px;
  .style1 {
    font-weight: 700;
    color: #000;
    margin-right: 18px;
  }
  &__list {
    display: flex;
    li {
      margin-right: 28px;
      color: #999;
      cursor: pointer;
    }
    .current {
      color: #0a328e;
      font-weight: 700;
    }
  }
}
.bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  img {
    mix-blend-mode: multiply; //正片叠底
    margin-right: 10px;
  }
}
</style>